import { createStore } from 'vuex'
import axios from 'axios'
import persist from 'vuex-persistedstate'
import moduleA from './moduleA'
import moduleB from './moduleB'
export default createStore({
    state: {
        goods: [],
        sex: '女'
    },
    getters: {
        time() {
            return new Date()
        }
    },
    mutations: {
        changeGoods(state, arr) {
            state.goods = arr
        }
    },
    actions: {
        // 请求购物车列表数据 action方法是异步操作不能直接修改state中的数据 需要通过提交mutation来修改数据
        // 每一个action函数都有一个默认的参数context 她其实是一个关联vuex上下文的实例
        getData(context) {
            // console.log(context);
            axios.get('/goods.json').then(res => {
                // console.log(res);
                context.commit('changeGoods', res.data)
            })
        }

    },
    // 正常工作环境中 数据量是比较大的 如果将所有的数据都写在这一个模块中 将会导致该文件代码量庞大 非常臃肿 不利于代码维护
    modules: {
        moduleA,
        moduleB
    },

    plugins: [persist({
        storage: localStorage, // 定义数据存储的方式 值可以是localStorage 也可以是sessionStorage
        reducer(state) { // 定义需要指定存储的数据 因为正常工作中vuex不是每一条数据都需要存储 所以我们需要指定需要存储的数据
            return {
                goods: state.goods
            }
        }
    })]
})